<script>
import CustomIcon from '@/components/CustomIcon/index.vue'
import { requestPost } from '@/api/system/common'

export default {
  name: 'FootMenuEdit',
  components: { CustomIcon },
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      loading: false,
      baseURL: process.env.VUE_APP_BASE_API.substring(
        0,
        process.env.VUE_APP_BASE_API.length - 1
      ), // api 的 base_url
      form: {},
      rules: {
        name: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
        tb: [{ required: true, message: '图标不能为空', trigger: 'change' }]
      }
    }
  },
  methods: {
    openDialog(data) {
      this.drawer = true
      this.form = data
    },
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          requestPost('rest/api/mobile/v1/menu/manager/update/entity', this.form)
            .then(res => {
              console.log(res)
              this.handleClose()
            }).catch(() => {

            })
          this.handleClose()
        }
      })
    },
    selectedIcon(data) {
      this.form.tb = data
    },
    handleAvatarSuccess(res) {
      const { data } = res
      this.form.bakImage = data.url
    },
    handleClose() {
      this.drawer = false
    }
  }
}
</script>

<template>
  <el-drawer
    title="菜单设置"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose"
    :append-to-body="true"
    :size="600"
    :modal="false"
  >
    <div class="custom-drawer-body">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="按钮名称" prop="name" style="width: 100%">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图标" prop="tb" style="width: 100%">
              <el-popover
                placement="bottom-start"
                trigger="click"
                width="250"
                @show="$refs['iconSelect'].reset()"
              >
                <custom-icon ref="iconSelect" @selected="selectedIcon" />
                <el-input slot="reference" v-model="form.tb" style="width: 450px;" placeholder="点击选择图标" readonly>
                  <i
                    v-if="form.tb"
                    slot="prefix"
                    :class="form.tb"
                    class="el-input__icon"
                    style="height: 32px;width: 16px;"
                  />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="背景颜色" prop="bakColor" style="width: 100%">
              <el-color-picker v-model="form.bakColor" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="背景图" style="width: 100%;">
              <el-upload
                class="avatar-uploader schoolBottomImage"
                :action="baseURL+'/rest/api/config/v1/file/custom/upload?type=8&fs=1'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="form.bakImage" :src="baseURL+form.bakImage" class="school-bak-image">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
              <el-input v-model="form.bakImage" type="hidden" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="handleClose">取消</el-button>
        <el-button :loading="loading" type="primary" @click="save('form')">确认</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<style scoped>
.custom-drawer-body {
  width: 100%;
  height: 100%;
}
.schoolBottomImage {
  width: 100%;
  height: 250px;
  border: 1px dashed #9b9b9b;
  border-radius: 4px;
  text-align: center;
  line-height: 250px;
  font-size: 34px;
}
.school-bak-image {
  width: 100%;
  height: 250px;
}
.dialog-footer {
  width: 100%;
  height: 40px;
  text-align: left;
  line-height: 40px;
  padding: 0 60px;
  box-sizing: border-box;
}
.el-upload {
  width: 100%;
  height: 250px;
}
</style>
